<template>
  <div class="full-body">
    <!-- 工具栏 start -->
    <md-toolbar class="md-dense" md-elevation="4">
      <span class="md-title">{{getLangText(label.theTitle)}}</span>
      <span style="display:inline-flex;align-items:center;" class="md-toolbar-section-end">
        <span style="width:300px;display:inline-flex;height:48px;">
          <md-field style="margin:0;">
            <label>{{getLangText(label.searchTip)}}</label>
            <md-input v-model="searchKey"></md-input>
            <md-button class="md-icon-button" @click="searchTemplate">
              <i class="iconfont iconsearch"></i>
            </md-button>
          </md-field>
        </span>
        <md-button class="md-icon-button" @click="loadTemplate">
          <i class="iconfont iconrefresh"></i>
        </md-button>
      </span>
    </md-toolbar>
    <!-- 工具栏 end -->
    <!-- 卡片容器 start -->
    <div class="md-dense-body1">
      <md-card v-for="(item,idx) in dataList" :key="idx" v-show="dataList.length>0">       
         <md-card-header style="display:flex;"><span class="md-title" style="flex:1">{{item.name}}</span>
         <md-button class="md-icon-button md-primary" @click="showUrlData(item)"><i class="iconfont iconview"></i></md-button>
         </md-card-header>         
          <md-card-content>                
          <table class="form-table"  border="1">
            <tr>
              <td>{{getLangText(label.address)}}:</td>
                  <td>{{item.path}}</td>
            </tr>
            <tbody v-if="item.param&&item.param.length>0">           
            <tr>
              <td colspan="2" >{{getLangText(label.param)}}</td>
            </tr>
            <tr>
              <th>Name</th>
               <th>Type</th>
            </tr>
              <tr v-for="(i,id) in item.param" :key="'param'+idx+'_'+id">
                  <td>{{i.name}}:</td>
                  <td>{{i.type}}</td>
              </tr>   
               </tbody>           
          </table>
          </md-card-content>
        
      </md-card>

      <div v-if="dataList.length==0" class="list-nodata">{{getLangText(label.nodata)}}</div>
    </div>
    <md-dialog-confirm
      :md-active.sync="showDel"
      :md-title="getLangText(label.delTip)"
      :md-content="getLangText(label.datapackage)+(dataList[selectId]?dataList[selectId].template_id:'')"
      :md-confirm-text="getLangText(label.ok)"
      :md-cancel-text="getLangText(label.no)"
      @md-confirm="onDelConfirm"
    />

    <md-dialog-alert :md-active.sync="isAlert" :md-content="alertTip" md-confirm-text="OK" />
  </div>
</template>

<script>
import CarwebAPI from '@/components/data/carweb_api.js';
export default {
  name: "DataPackage",
  props: {
    langType: {
      type: String,
      default: window.localStorage.getItem("langType")
    }
  },
  data: () => ({
    label: {
      theTitle: { zh: "API接口列表", en: "API List" },
      searchTip: { zh: "请输入搜索关键词", en: "Please input search keyword" },
      searchLength: {
        zh: "请输入至少两个关键词",
        en: "Please input at least 2 keywords"
      },     
      datapackage: { zh: "模板ID:", en: "TemplateId:" },
      ok: { zh: "确定", en: "OK" },
      no: { zh: "取消", en: "cancel" },
      nodata: { zh: "暂无模板", en: "no data package" },
      loadFail: { zh: "加载模板失败!", en: "Fail to load api!" },
      searchFail: { zh: "搜索失败!", en: "Fail to search!" },
      param:{zh:"参数",en:"Params"},
      address:{zh:"请求地址",en:"URL"}
    },
    searchKey: "",
    dataList: [],

    selectId: 0,
    showDel: false,
    isAlert: false,
    alertTip: "",
    originList: ""
  }),
  watch: {
    searchKey() {
      if (!this.searchKey) {
        this.dataList = JSON.parse(this.originList);
      }
    }
  },
  methods: {
    showUrlData(item){
      window.location.hash="#/datasource";
      var that=this;
      setTimeout(() => {
        that.app.$emit("url-param",item);
      }, 1000);
      
      
    },
    searchTemplate() {
      var that = this;
      if (this.searchKey && this.searchKey.length >= 2) {
        $.post(
          this.API.searchTemplate,
          {
            key: encodeURI(this.searchKey),
            userId: JSON.parse(window.localStorage.getItem("carweb_user")).userId
          },
          function(res) {
            if (res.errCode == 0) {
              for (var i = 0; i < res.data.length; i++) {
                res.data[i].title = decodeURI(res.data[i].title);
              }
              res.data = res.data.sort(function(a, b) {
                return (
                  new Date(b.update_time).getTime() -
                  new Date(a.update_time).getTime()
                );
              });
              that.dataList = res.data;
            } else {
              that.alertTip = that.getLangText(that.label.searchFail);
              that.isAlert = true;
            }
          }
        );
      } else {
        that.alertTip = that.getLangText(that.label.searchLength);
        that.isAlert = true;
      }
    },
    loadTemplate() {
    //   var that = this;
    //   $.post(
    //     this.API.getTemplateList,
    //     { userId: JSON.parse(window.localStorage.getItem("carweb_user")).userId },
    //     function(res) {
    //       if (res.errCode == 0) {
    //         for (var i = 0; i < res.data.length; i++) {
    //           res.data[i].title = decodeURI(res.data[i].title);
    //         }
    //         res.data = res.data.sort(function(a, b) {
    //           return (
    //             new Date(b.update_time).getTime() -
    //             new Date(a.update_time).getTime()
    //           );
    //         });
    //         that.dataList = res.data;
    //         that.originList = JSON.stringify(res.data);
    //       } else {
    //         that.alertTip = that.getLangText(that.label.loadFail);
    //         that.isAlert = true;
    //       }
    //     }
    //   );
      var list=[];
      for(var key in CarwebAPI){
          list.push(CarwebAPI[key]);
      }
      this.dataList =list;
    },
    //显示模板详情
    showDetail(item) {
      window.open(
        window.location.origin +
          window.location.pathname +
          "#/leader-detail?tempId=" +
          item.template_id
      );
    },

    //跳转到模板编辑界面
    editCard(item) {
      window.open(
        window.location.origin +
          window.location.pathname +
          "#/dashboard?tempId=" +
          item.template_id
      );
    },

    onDelConfirm() {
      var that = this;
      $.post(
        this.API.deleteTemplate,
        {
          userId: JSON.parse(window.localStorage.getItem("carweb_user")).userId,
          tempId: this.dataList[this.selectId].template_id
        },
        function(res) {
          if (res.errCode == 0) {
            that.dataList.splice(that.selectId, 1);
            that.alertTip = that.getLangText(that.label.deleteOk);
          } else {
            that.alertTip = that.getLangText(that.label.deleteFail);
          }
          that.isAlert = true;
        }
      );
    }
  },
  mounted() {
    this.loadTemplate();
  }
};
</script>
<style lang="scss" scoped>
.md-layout {
  height: 100%;
}
.md-app-content .md-card {
  width: calc(25% - 8px);
  margin: 4px !important;
  display: inline-block;
  vertical-align: top;
}
.md-card-content,
.md-card-header {
  padding: 8px;
}


.form-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 1px;
 border-color: gainsboro;
  tr{
    td:nth-child(1){
      color: #505050;
      font-weight: bold;
      white-space: nowrap;
    }
    td:nth-child(2){
      font-weight: normal;
      white-space: normal;
            word-break: break-all;
    }
    td[colspan='2']{
            color:var(--md-theme-default-primary, rgba(0, 0, 0, 0.12));
            font-weight: normal;
            text-align: center;
            
        }
  }
  tr:nth-child(odd){
    background: rgba(153,255,255,0.2);
  }
}
</style>